<template>
    <div>
        <h1>我是indexOne页面</h1>
        <div id="fenye">
            <table border="1px">
                <thead>
                <tr>
                    <th>商品编号</th>
                    <th>商品名称</th>
                    <th>商品数量</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in nowData" :key="index">
                    <td>{{item.g_id}}</td>
                    <td>{{item.g_name}}</td>
                    <td>{{item.g_num}}</td>
                    <td>
                        <button @click="deleteStu(item.g_id,index)">删除</button>
                        <button>修改</button>
                    </td>
                </tr>
                </tbody>
            </table>
            <div id="pageNum">
                <button @click="prevPage()" id="prevPage">上一页</button>
                <div id="pages">
                    <button v-for="index of pageNum" :key="index" @click="changePage(index)">{{index}}</button>
                </div>
                <button @click="nextPage()" id="nextPage">下一页</button>
            </div>
        </div>

    </div>
</template>

<script>
    import axios from 'axios'
    // import * as url from '../api'
    export default {
        name: "Lyp",
        data(){
            return{
                indexData: [],
                nowData:[],
                pageNum:0,
                begin:0,
                end:4
            }
        },
        methods:{
            changePage(index){
                // console.log(index)
                this.begin=(index-1)*5
                this.end=index*5-1
                this.findNowData()
            },
            findNowData(){
                this.pageNum=Math.ceil(this.indexData.length/5)
                this.nowData=[]
                // console.log(this.pageNum)
                // this.nowData=this.indexData.filter(index=>index<5)
                if (this.pageNum===1){
                    this.nowData=this.indexData
                }else {
                    for (let i=this.begin;i<=this.end;i++){
                        if (i<this.indexData.length){
                            this.nowData.push(this.indexData[i])
                        }
                    }
                }

            },
            prevPage(){
                // console.log(111)
                if (this.begin){
                    // console.log(222)
                    this.begin=this.begin-5
                    this.end=this.end-5
                    this.findNowData()
                }
            },
            nextPage(){
                // console.log(222)
                if (this.end<this.indexData.length){
                    this.begin=this.begin+5
                    this.end=this.end+5
                    this.findNowData()
                }
            },
            deleteStu(id,index){
                // console.log('删除成功')
                axios({
                    url:'http://192.168.1.105:8080/delData',
                    method:'post',
                    data:[id],
                }).then(respData=>{
                    console.log(respData)
                    if (respData.status === 200){
                        this.indexData.splice(index,1)
                        this.findNowData()
                        // console.log(this.nowData)
                    }else{
                        console.log('删除失败')
                    }
                    // respData.status === 200 ? this.indexData.splice(index,1):console.log('删除失败')
                }).catch(err=>{
                    console.log(err)
                })
            }
        },
        beforeCreate() {

        },
        created() {
            axios({
                // url:url.GETDATA,
                url:'http://192.168.1.105:8080/getData',
                method:'post'
            }).then(respData=>{
                // console.log(respData)
                this.indexData=respData.data
                // console.log(this.indexData)
                this.findNowData()
                // console.log(this.nowData)

            }).catch(err=>{
                console.log(err)
            })
        },
        beforeMount() {

        },
        mounted() {

        },
        beforeDestroy() {

        },
        destroyed() {

        }
    }
</script>

<style scoped lang="less">
    #fenye{
        height: 200px;
        border: 1px solid rebeccapurple;
        position: relative;
    }
    #pageNum{
        height: 50px;
        width: 400px;
        position: absolute;
        bottom: -20px;
        #prevPage{
            position: absolute;
            left: 10px;
        }
        #pages{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            button{
                width: 20px;
                height: 20px;
                float: left;
            }
        }
        #nextPage{
            position: absolute;
            right: 10px;
        }
    }
</style>

